<template>
  <div class="add-promotion">
    <h2>添加活动</h2>

    <!-- 活动基本信息表单 -->
    <el-form ref="promotionForm" :model="promotion" label-width="80px" size="medium">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="promotion.name" placeholder="请输入活动名称"></el-input>
      </el-form-item>

      <el-form-item label="活动日期" prop="dateRange">
        <el-date-picker
          v-model="promotion.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <!-- 其他活动信息字段，根据实际需求添加 -->

      <!-- 活动商品设置 -->
      <el-form-item label="活动商品" prop="selectedWines">
        <el-select v-model="promotion.selectedWines" multiple placeholder="请选择活动商品">
          <el-option v-for="wine in availableWines" :key="wine.wineId" :label="wine.name" :value="wine.wineId">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 折扣设置 -->
      <el-form-item label="折扣" prop="discountPercent">
        <el-input v-model="promotion.discountPercent" type="number" :min="0" :max="100" suffix="%"></el-input>
      </el-form-item>

      <!-- 保存按钮 -->
      <el-form-item>
        <el-button type="primary" @click="savePromotion">保存活动</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      promotion: {
        name: "",
        dateRange: [],
        selectedWines: [],
        discountPercent: 0,
        // 其他活动信息字段，根据实际需求添加
      },
      availableWines: [
        { wineId: 1, name: "Wine A" },
        { wineId: 2, name: "Wine B" },
        // 其他酒品信息，从后端获取或硬编码
      ],
    };
  },
  methods: {
    savePromotion() {
      // 这里可以调用后端 PromotionService 的接口来保存活动信息和商品信息
      this.$axios.post("/api/promotion/addPromotionAndProducts", this.promotion)
        .then(response => {
          console.log("活动保存成功", response.data);
          // 清空表单或其他操作
          this.$refs.promotionForm.resetFields();
        })
        .catch(error => {
          console.error("保存活动出错", error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 添加一些样式以美化页面 */
.add-promotion {
 max-width: 600px;
 margin: auto;
 padding: 20px;
}
</style>
